import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image, ScrollView, Button } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { namespace } from '../../models/page-topic'
import MpPage from '../mp-page/index'
import './index.less'

interface IProps {
  state: number
  tracksList: []
  items: []
  recommends: []
  hasMore: boolean
  isLoadData: boolean
  pageIndex: number
  pageSize: number
}

interface IState {}
class Index extends Component<IProps> {
  componentDidMount() {}
  componentWillUnmount() {}
  list: any = Taro.createRef()

  componentDidShow() {}

  componentDidHide() {}

  init = async () => {
    await this.props.dispatch({
      type: `${namespace}/init`
    })
  }
  loadTrack = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadTrack`
    })
  }
  loadData = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadData`
    })
  }
  onFollow = async (item, index, e) => {
    e.stopPropagation()
    await this.props.dispatch({
      type: `${namespace}/onFollow`,
      payload: {
        item,
        index
      }
    })
  }
  goMaidan = () => {
    Taro.navigateTo({
      url: '/pages/topic-maidan/index'
    })
  }
  goTopic = (id) => {
    Taro.navigateTo({
      url: '/pages/topic?id=' + id
    })
  }
  onClean = async () => {
    await this.props.dispatch({
      type: `${namespace}/cleanTopicTrack`
    })
  }
  onScrolltolower = async () => {
    await this.loadData()
  }
  onRetry = async () => {
    await this.init()
  }
  onRefresh = async () => {
    await this.props.dispatch({
      type: 'setState',
      payload: {
        hasMore: true,
        pageIndex: 1,
        topicList: []
      }
    })
    await this.loadData()
    this.list.current.hideRefresh()
  }

  render() {
    const { state, tracksList, items, recommends } = this.props
    console.log(recommends)
    return (
      <MpPage
        enableRefresh
        ref={this.list}
        state={state}
        enableTips={false}
        showMoreLoading={false}
        onScrolltolower={this.onScrolltolower}
        onRetry={this.onRetry}
        onRefresh={this.onRefresh}
      >
        {tracksList ? (
          <View className="tracks">
            <View className="top">
              <View className="title">最近访问的话题</View>
              <View className="btn" onClick={this.onClean}>
                <View className="icon icon-del-line"></View>
              </View>
            </View>
            <ScrollView scrollX>
              <View className="list">
                {tracksList.map((item) => {
                  return (
                    <View className="item" key={item.id} onClick={this.goTopic.bind(this, item.id)}>
                      <Image src={item.iconPath} />
                      <View className="item-title">{item.title}</View>
                    </View>
                  )
                })}
                <View className="item item-more" onClick={this.goMaidan}>
                  <View className="ic">
                    <View className="icon icon-more-line" />
                  </View>
                  <View className="item-title">发现话题</View>
                </View>
              </View>
            </ScrollView>
          </View>
        ) : null}
        {items.length ? (
          <View className="follow recommends">
            <View className="title">
              <View className="left">关注话题</View>
              <View className="right" onClick={this.goMaidan}>
                <View>话题广场</View>
                <View className="icon icon-arrow-right" />
              </View>
            </View>
            <View className="list">
              {items.map((item) => {
                return (
                  <View
                    className="item"
                    key={item.id}
                    hover-className="item-hover"
                    onClick={this.goTopic.bind(this, item.id)}
                  >
                    <Image src={item.iconPath} />
                    <View className="item-content">
                      <View className="item-title">{item.title}</View>
                      <View className="item-des">{item.des}</View>
                    </View>
                    <View className="item-action">{/* <View className="num">3</View> */}</View>
                  </View>
                )
              })}
            </View>
            <View className="footer" onClick={this.goMaidan}>
              <View className="icon icon-add" />
              <View>关注更多话题</View>
            </View>
          </View>
        ) : null}
        {!items.length ? (
          <View>
            <View className="empty">
              <View className="empty-content">
                <View>你还没有关注的话题,</View>
                <View>先关注一下吧!</View>
              </View>
            </View>
            <View className="recommends">
              <View className="title">
                <View className="left">推荐话题</View>
                <View className="right" onClick={this.goMaidan}>
                  <View>话题广场</View>
                  <View className="icon icon-arrow-right" />
                </View>
              </View>
              <View className="list">
                {recommends.map((item, index) => {
                  return (
                    <View className="item" key={item.id} onClick={this.goTopic.bind(this, item.id)}>
                      <Image src={item.iconPath} />
                      <View className="item-content">
                        <View className="item-title">{item.title}</View>
                        <View className="item-des">{item.des}</View>
                      </View>
                      <View className="item-action" onClick={this.onFollow.bind(this, item, index)}>
                        <Button className={`btn ${item.hasFollow ? 'has' : ''}`}>
                          <View className={`icon icon-${item.hasFollow ? 'follow' : 'add'}`}></View>
                          <View>{item.hasFollow ? '已关注' : '关注'}</View>
                        </Button>
                      </View>
                    </View>
                  )
                })}
              </View>
            </View>
          </View>
        ) : null}
      </MpPage>
    )
  }
}
const mapStateToProps = (models) => {
  return {
    ...models[namespace]
  }
}
export default connect(mapStateToProps)(Index)

// Index.defaultProps = {
//   labels: ['话题', '推荐', '关注'],
//   selectedIndex: 1,
//   extclassName: '',
//   left: 51
// }
